<template>
    <div>
        <el-dialog
            :title="info.isAdd ? '菜单添加' : '菜单编辑'"
            :visible.sync="info.isshow"
            @closed="closed"
        >
            <div>form:{{ form }}</div>
            <el-form :model="form">
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="changePid">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <!-- 遍历list -->
                        <el-option
                            v-for="item in list"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio v-model="form.type" disabled :label="1">目录</el-radio>
                    <el-radio v-model="form.type" disabled :label="2">菜单</el-radio>
                </el-form-item>

                <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="form.type == 1">
                    <el-select v-model="form.icon" placeholder="请选择菜单图标">
                        <el-option v-for="item in icons" :key="item" :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
                    <el-select v-model="form.url" placeholder="请选择菜单地址">
                        <el-option
                            v-for="item in IndexRoutes"
                            :key="item.path"
                            :label="item.meta.title"
                            :value="'/' + item.path"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" v-if="info.isAdd" @click="add">添加</el-button>
                <el-button type="primary" v-else @click="edit">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqmenuAdd, reqmenuinfo, reqmenuedit } from "../../../http/api"
import { IndexRoutes } from "../../../router"
import { errorAlert, successAlert } from "../../../utils/alert"
export default {
    props: ["info", "list"],
    data() {
        return {
            form: {
                pid: "",
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1,
            },
            icons: [
                "el-icon-setting",
                "el-icon-s-goods",
                "el-icon-help",
                "el-icon-upload",
                "el-icon-video-camera",
            ],
            formLabelWidth: "120px",
            IndexRoutes,
        }
    },

    computed: {
        ...mapGetters({}),
    },
    mounted() { },
    methods: {
        ...mapActions({}),
        //清空表单的数据
        empty() {
            this.form = {
                pid: "",
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1,
            }
        },
        //做验证
        checkDate() {
            return new Promise((resolve, rejeck) => {
                //验证
                if (this.form.title == "") {
                    errorAlert("菜单名称不能为空")
                    return;
                }
                if (this.form.pid === "") {
                    errorAlert("上级菜单不能为空")
                    return;
                }
                if (this.form.icon == "" && this.form.pid == 0) {
                    errorAlert("菜单图标不能为空")
                    return;
                }
                if (this.form.url === "" && this.form.pid !== 0) {
                    errorAlert("菜单地址不能为空")
                    return;
                }
                resolve();
            })
        },
        //点了添加
        add() {
            this.checkDate().then(() => {
                reqmenuAdd(this.form).then(res => {
                    if (res.data.code == 200) {
                        //弹窗成功
                        successAlert(res.data.msg);
                        //调用empty清空表单内容
                        this.empty();
                        //关闭弹框
                        this.info.isshow = false;
                        //刷新列表
                        this.$emit("init")
                    }
                })
            })
        },
        //点了取消
        cancel() {
            this.info.isshow = false
        },
        //修改了上级菜单
        changePid() {
            if (this.form.pid == 0) {
                this.form.type = 1
            } else {
                this.form.type = 2
            }
        },
        //编辑渲染页面
        getOne(id) {
            reqmenuinfo({ id: id }).then(res => {
                if (res.data.code == 200) {
                    this.form = res.data.list
                    //补id
                    this.form.id = id
                }
            })
        },
        //修改
        edit() {
            this.checkDate().then(() => {
                reqmenuedit(this.form).then(res => {
                    if (res.data.code == 200) {
                        //成功弹窗
                        successAlert(res.data.msg);
                        //清除数据表单
                        this.empty();
                        //关闭窗口
                        this.info.isshow = false
                        //刷新页面
                        this.$emit("init")
                    }
                })
            })
        },
        //弹框关闭
        closed() {
            if (this.info.isAdd == false) {
                this.empty()
            }
        }
    },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
</style>